import React, { useState } from 'react';
import type { FormProps } from 'antd';
import { Button, Form, Input, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';

type FieldType = {
  username?: string;
  password?: string;
};

const LoginForm: React.FC = () => {
  const navigate = useNavigate();
  const [confirmLoading, setConfirmLoading] = useState(false);

  const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
    console.log('Success:', values);
    setConfirmLoading(true);
    setTimeout(() => {
      setConfirmLoading(false);
      navigate('/visualBSP');
      message.success('登录成功');
    }, 800);
  };

  const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  return(
    <Form
      name="basic"
      style={{ maxWidth: 600 }}
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item<FieldType>
          label={null}
          name="username"
          rules={[
              { required: true, message: '请输入您的账号!' },
              { pattern: /^\d+$/, message: '必须为数字' },
              { min: 3, max: 10, message: '长度为3~8' }
          ]}
      >
        <Input prefix={<UserOutlined />}/>
      </Form.Item>

      <Form.Item<FieldType>
          label={null}
          name="password"
          rules={[{ required: true, message: '请输入您的密码' }]}
      >
        <Input.Password prefix={<LockOutlined />}/>
      </Form.Item>

      <Form.Item label={null}>
          <Button 
              type="primary" 
              htmlType="submit"
              loading={confirmLoading}
              style={{ width: '100%' }}
          >
              登 录
          </Button>
      </Form.Item>

      <Form.Item label={null}>
          <Button  
              style={{ width: '100%' }}
          >
              注 册
          </Button>
      </Form.Item>
    </Form>
  )
};

export default LoginForm;